<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>offset-client-scroll-page-screen</title>
    <link rel="shortcut icon" href="../../../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../../css/position.css">
</head>

<body>
    <div class="position">
        screenX: <input type="text" id="sx">
        screenY: <input type="text" id="sy">
        pageX: <input type="text" id="px">
        pageY: <input type="text" id="py">
        clientX: <input type="text" id="cx">
        clientY: <input type="text" id="cy"><br><br>
        scrollY: <input type="text" id="sly">
        offsetX: <input type="text" id="ox">
        offsetY: <input type="text" id="oy">
    </div>
    <div class="show">
        <p>外面盒子的信息：</p>
        <table>
            <tr>
                <td>&nbsp;</td>
                <td>Width</td>
                <td>Height</td>
                <td>Left</td>
                <td>Top</td>
            </tr>
            <tr>
                <td>offset 系列</td>
                <td class="sh1">1</td>
                <td class="sh1">2</td>
                <td class="sh1">3</td>
                <td class="sh1">4</td>
            </tr>
            <tr>
                <td>scoll 系列</td>
                <td class="sh2">1</td>
                <td class="sh2">2</td>
                <td class="sh2">3</td>
                <td class="sh2">4</td>
            </tr>
            <tr>
                <td>client 系列</td>
                <td class="sh3">1</td>
                <td class="sh3">2</td>
                <td class="sh3">3</td>
                <td class="sh3">4</td>
            </tr>
            <tr>
                <td>page 系列</td>
                <td class="sh4">1</td>
                <td class="sh4">2</td>
                <td class="sh4">3</td>
                <td class="sh4">4</td>
            </tr>
            <tr>
                <td>screen 系列</td>
                <td class="sh5">1</td>
                <td class="sh5">2</td>
                <td class="sh5">3</td>
                <td class="sh5">4</td>
            </tr>
        </table>
    </div>
    <div class="container">
        <h1>position</h1>
        <figure>
            <img src="./position.png" alt="position">
            <figcaption><a
                    href="https://segmentfault.com/a/1190000018738196">关于offsetX、layerX、clientX、screenX以及pageX</a>
            </figcaption>
        </figure>
        <ul>
            <li>
                <div class="calendar">
                    <p class="date">19</p>
                    <p class="month">aug 2019</p>
                </div>
                <div class="content">淹没在这成千上万的大城中，我觉得得到了真正的自由：一种独来独往，无人理会的自由。</div>
            </li>
            <li>
                <div class="calendar">
                    <p class="date">18</p>
                    <p class="month">aug 2019</p>
                </div>
                <div class="content">如果有人不相信数学是简单的，那是因为他们没有意识到人生有多复杂。</div>
            </li>
            <li>
                <div class="calendar">
                    <p class="date">17</p>
                    <p class="month">aug 2019</p>
                </div>
                <div class="content">被别人揭下面具是一种失败，自己揭下面具却是一种胜利。</div>
            </li>
            <li>
                <div class="calendar">
                    <p class="date">16</p>
                    <p class="month">aug 2019</p>
                </div>
                <div class="content">活在活着的人的心里，就是没有死去。</div>
            </li>
            <li>
                <div class="calendar">
                    <p class="date">15</p>
                    <p class="month">aug 2019</p>
                </div>
                <div class="content">决定放弃了的事，就请放弃得干干净净。那些决定再也不见面的人，就真的不要见面了。请不要让我再做背叛自己的事了。如果要爱别人，就请先好好爱自己。</div>
            </li>
            <li>
                <div class="calendar">
                    <p class="date">14</p>
                    <p class="month">aug 2019</p>
                </div>
                <div class="content">那些你独自一人度过的时间，比如组装电脑或练习大提琴，其实你真正在做的是让自己变有趣。等有天别人终于注意到你时，他们会发现一个比他们想象中更酷的人。</div>
            </li>
            <li>
                <div class="calendar">
                    <p class="date">13</p>
                    <p class="month">aug 2019</p>
                </div>
                <div class="content">爱是两个人可以在一起安心承受孤独，那些无法触摸你的孤独的人，那些让你觉得孤独的人，无非是过客罢了。</div>
            </li>
        </ul>
    </div>

    <script src="../../js/position.js"></script>
</body>

</html>